<template>
  <!-- 移动端注册界面 -->
  <div class="register">
    <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="nickname"
        name="昵称"
        label="昵称"
        placeholder="请填写昵称"
        :rules="[{ required: true, message: '请填写昵称' },
        { validator:validatorNickname, message: '昵称只能为2-18位，且智能包含字母、数字、汉字和‘_’、‘丶’' }]"
      />
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="请填写用户名"
        :rules="[{ required: true, message: '请填写用户名' },
        { validator:validatorUsername, message: '用户名只能包括数字、字母、下划线，且长度必须在5-18位' }]"
      />
      <van-field
        v-model="email"
        name="邮箱"
        label="邮箱"
        placeholder="请填写邮箱"
        :rules="[{ required: true, message: '请填写邮箱' },
        { validator:validatorEmail, message: '邮箱格式不正确' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' },
        { validator:validatorPassword, message: '密码必须为6-18位，只能包括数字、字母、特殊字符' }]"
      />
      <van-field
        v-model="repassword"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="请重新输入密码"
        :rules="[{ required: true, message: '请重新输入密码' },
        { validator:validatorRepassword, message: '两次密码不一致' }
        ]"
      />
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="loading"
          :loading="loading"
        >注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import crypto from "crypto";
export default {
  name: "RegisterMobile",
  data() {
    return {
      username: "",
      password: "",
      nickname: "",
      email: "",
      repassword: "",
      loading: false
    };
  },
  methods: {
    onSubmit(values) {
      this.loading = true;
      this.$api.post(
        "register/",
        {
          nickname: this.nickname,
          username: this.username,
          password: setMd5(this.password),
          email: this.email
        },
        response => {
          this.loading = false;
          if (response.status != 200) {
            this.$notify({ type: "danger", message: "注册失败，服务器错误" });
            this.$notify({ type: "danger", message: "" + response });
          } else {
            var data = response.data;
            console.log(data);
            if (data.err_code == 0) {
              if (data.data.result) {
                this.$notify({ type: "success", message: "注册成功,请您登陆" });
                this.$router.push("login_mobile");
              } else {
                this.$notify({
                  type: "danger",
                  message: "注册失败" + data.data.error
                });
              }
            } else {
              this.$notify({ type: "danger", message: data.error });
            }
          }
        }
      );
    },
    validatorUsername(value) {
      var reg = new RegExp("^[a-zA-Z0-9_]{5,18}$");
      if (!reg.test(value)) {
        return false;
      } else {
        return true;
      }
    },
    validatorPassword(value) {
      var reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$");
      if (!reg.test(value)) {
        return false;
      } else {
        return true;
      }
    },
    validatorNickname(value) {
      var reg = new RegExp("^[a-zA-Z0-9\u4e00-\u9fa5_丶]{2,18}$");
      if (!reg.test(value)) {
        return false;
      } else {
        return true;
      }
    },
    validatorEmail(value) {
      var reg = new RegExp(
        "^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"
      );
      if (!reg.test(value)) {
        return false;
      } else {
        return true;
      }
    },
    validatorRepassword(value) {
      if (value == this.password) {
        return true;
      } else {
        return false;
      }
    },
    onClickLeft() {
      this.$router.push("me_mobile");
    }
  }
};
function setMd5(text) {
  var md5 = crypto.createHash("md5");
  md5.update(text);
  var text_md5 = md5.digest("hex");
  return text_md5;
}
</script>
<style scoped>
</style>
